<template>
  <el-main>
    <div class="top">
      <div class="total-top">
        <div class="total-left">
          <h4 class="title">
            <strong>工单统计</strong><span>{{ firstDay }} ~ {{ today }}</span>
          </h4>
          <ul class="content">
            <li>
              <h2>{{ total }}</h2>
              <p>工单总数 (个)</p>
            </li>
            <li>
              <h2>{{ completedTotal }}</h2>
              <p>完成工单 (个)</p>
            </li>
            <li>
              <h2>{{ ing }}</h2>
              <p>进行工单 (个)</p>
            </li>
            <li>
              <h2>{{ cancelTotal }}</h2>
              <p>取消工单 (个)</p>
            </li>
          </ul>
        </div>
        <div class="total-right">
          <h4 class="title">
            <strong>销售统计</strong><span>{{ firstDay }} ~ {{ today }}</span>
          </h4>
          <ul class="content">
            <li>
              <h2>{{ count }}</h2>
              <p>订单量 (个)</p>
            </li>
            <li>
              <h2>{{ amount }}</h2>
              <p>销售额 (万元)</p>
            </li>
          </ul>
        </div>

        <div class="echarts">
          <div>
            <div class="left">
              <h4 class="title">
                <strong>销售数据</strong><span>{{ data }} ~ {{ today }}</span>
              </h4>
            </div>
            <div class="right">
              <span :class="activeIndex === 1 ? 'active' : ''" @click="addFn(1)">周</span>
              <span :class="activeIndex === 2 ? 'active' : ''" @click="addFn(2)">月</span>
              <span :class="activeIndex === 3 ? 'active' : ''" @click="addFn(3)">年</span>
            </div>
          </div>
          <div class="echartsbox">
            <div ref="line" id="line"></div>
            <div ref="bar" id="bar"></div>
          </div>
        </div>
      </div>
      <div class="hotgoods">
        <h4 class="title">
          <strong>商品热榜</strong><span>{{ firstDay }} ~ {{ today }}</span>
        </h4>
        <ul class="content">
          <li v-for="(item, index) in list" :key="index">
            <span>{{ index + 1 }}</span>
            <p>{{ item.skuName }}</p>
            <div>{{ item.count }}单</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="top">
          <h4 class="title">合作商点位数Top5</h4>
          <i class="icon icon-gengduo"></i>
        </div>
        <div class="bottom">
          <div id="pie" ref="pie"></div>
          <div class="info">
            <h3>{{ this.value }}</h3>
            <p>点位数</p>
            <h3>{{ this.partner }}</h3>
            <p>合作商数</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <h4>异常设备监控</h4>
          <i class="icon icon-gengduo"></i>
        </div>
        <div class="pic">
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="" />
        </div>
        <p>暂无数据</p>
      </div>
    </div>
  </el-main>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { getTaskReportInfo, getOrderCount, getOrderAmount, getSkuTop, getamountCollect, getRegionCollect, getNodeCollect } from '@/api/article'
export default {
  data () {
    return {
      total: '',
      cancelTotal: '',
      completedTotal: '',
      ing: '',
      count: '',
      amount: '',
      list: [],
      yearDay: '',
      firstDay: '',
      weekFirstDay: '',
      today: '',
      lineyAxis: [],
      linexAxis: [],
      lineyAxis1: [],
      linexAxis1: [],
      activeIndex: 1,
      collectList: [],
      value: 0,
      partner: 0,
      data: ''
    }
  },
  async mounted () {
    this.collectList = await getNodeCollect()
    this.value = this.collectList.reduce((sum, item) => sum + item.value, 0)
    this.partner = this.collectList.length
    this.echartsFn(this.weekFirstDay, this.today, 1)
  },
  async created () {
    this.firstDay = moment(new Date()).startOf('month').format('YYYY-MM-DD')
    this.yearDay = moment(new Date()).format('YYYY') + '-01-01'
    console.log(this.yearDay)
    this.weekFirstDay = moment(new Date()).startOf('isoWeek').format('YYYY-MM-DD')
    this.data = this.weekFirstDay
    this.today = moment(new Date()).format('YYYY-MM-DD')
    const res = await getTaskReportInfo(this.firstDay, this.today)
    this.total = res.reduce((total, item) => total + item.total, 0)
    this.cancelTotal = res.reduce((total, item) => total + item.cancelTotal, 0)
    this.completedTotal = res.reduce((total, item) => total + item.completedTotal, 0)
    this.ing = this.total - this.cancelTotal
    this.count = await getOrderCount(this.firstDay, this.today)
    this.amount = ((await getOrderAmount(this.firstDay, this.today)) / 1000000).toFixed(2)
    // 前十的商品
    this.list = await getSkuTop(this.firstDay, this.today)
  },
  methods: {
    async echartsFn (start, end, num, i) {
      console.log(this.collectList)
      const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const res1 = await getamountCollect(start, end, num)
      const res2 = await getRegionCollect(start, end)
      if (i === 2) {
        this.linexAxis = res1.xAxis
      } else if (i === 3) {
        this.linexAxis = res1.xAxis.map((item) => moment(item).format('YYYY年MM月'))
      } else {
        this.linexAxis = res1.xAxis.map((item) => week[Number(moment(item).format('d'))]) // 周日 0  周一 1
      }
      this.lineyAxis = res1.series.map((item) => item / 100)
      this.lineyAxis1 = res2.series.map((item) => item / 100)
      this.linexAxis1 = res2.xAxis
      const myChart = echarts.init(this.$refs.line)
      const myChart1 = echarts.init(this.$refs.bar)
      // 绘制图表
      myChart1.setOption({
        title: [
          {
            text: '销售额发布',
            left: '42%',
            top: '6px',
            textStyle: {
              fontSize: 14
            }
          },
          {
            subtext: ' 单位：元',
            top: '10px',
            left: '10px'
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return "<div style='padding:5px 10px'>" + '销售额：' + params[0].value + '<br/>' + params[0].name + '</div>'
          }
        },
        grid: {
          left: '3%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (value) {
                if (value.length > 3) {
                  return `${value.slice(0, 3)}\n...`
                }
                return value
              }
            },
            data: this.linexAxis1,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            data: this.lineyAxis1,
            barWidth: 14,
            itemStyle: {
              color: 'rgba(15, 255, 228, 1)'
            }
          }
        ],
        showBackground: true,
        itemStyle: {
          borderRadius: [5, 5, 0, 0]
        }
      })
      myChart.setOption({
        title: [
          {
            text: '销售额趋势图',
            left: '35%',
            top: '6px',
            textStyle: {
              fontSize: 14
            }
          },
          {
            subtext: ' 单位：元',
            top: '10px',
            left: '10px'
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return "<div style='padding:5px 10px'>" + '销售额：' + params[0].value + '<br/>' + params[0].name + '</div>'
          }
        },
        grid: {
          top: 48,

          left: 80, // 调整这个属性

          right: 40,

          bottom: 20
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 元'
          },
          axisPointer: {
            snap: true
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // prettier-ignore
          data: this.linexAxis
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: '#ff5757'
            },
            {
              gt: 6,
              lte: 17,
              color: '#ff5757'
            },
            {
              gt: 17,
              color: '#ff5757'
            }
          ]
        },
        series: [
          {
            name: 'Electricity',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 4
            },
            symbolSize: 8,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 95, 95, .35)' // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: 'rgba(255, 95, 95, .20)' // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: 'rgba(255, 95, 95, .10)' // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: 'rgba(255, 95, 95, .0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            // prettier-ignore
            data: this.lineyAxis,
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              }
            }
          }
        ]
      })
      const myChart2 = echarts.init(this.$refs.pie)
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: 'item',
          borderWidth: 0,
          formatter: function (value) {
            return `<div>${value.name} <br/>总占比：  ${value.percent}%</div>`
          }
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{d} %}',
          minMargin: 5,
          edgeDistance: 10,
          fontWeight: 700,
          lineHeight: 15,
          color: '#333',
          rich: {
            time: {
              fontSize: 11,
              color: '#444'
            }
          }
        },
        series: [
          {
            name: '总占比',
            type: 'pie',
            radius: ['20%', '70%'],
            roseType: 'radius',
            data: this.collectList
          }
        ]
      })
    },
    addFn (i) {
      this.activeIndex = i
      if (i === 1) {
        this.data = this.weekFirstDay
        this.echartsFn(this.weekFirstDay, this.today, 1)
      } else if (i === 2) {
        this.data = this.firstDay
        this.echartsFn(this.firstDay, this.today, 1, i)
      } else {
        this.data = this.yearDay
        this.echartsFn(this.yearDay, this.today, 2, i)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-main {
  background-color: #f8fafd;
  color: #333;
  display: block;
  .title {
    strong {
      vertical-align: middle;
    }
    span {
      font-size: 12px;
      margin-left: 10px;
      font-weight: 400;
      color: #999;
    }
  }

  .top {
    // height: 500px;
    display: flex;
    .total-top {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .total-left {
        height: 166px;
        width: 528px;
        padding: 20px;
        margin-right: 10px;
        background: #e9f3ff;
        background-image: url(),
          url('http://likede2-admin.itheima.net/img/task.66b715b7.png');
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, calc(100% - 12px) 100%;
        border-radius: 20px;

        .content {
          display: flex;
          padding-top: 22px;
          justify-content: space-around;
          li {
            width: 84px;
            h2 {
              font-size: 36px;
              color: #072074;
              text-shadow: 3px 4px 7px rgba(7, 32, 116, 0.4);
            }
            p {
              margin-top: 6px;
              font-size: 12px;
              color: #91a7dc;
            }
          }
        }
      }
      .total-right {
        width: 440px;
        height: 166px;
        border-radius: 20px;
        padding: 20px;
        margin: 0 10px;
        background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
        .content {
          display: flex;
          padding-top: 22px;
          justify-content: space-around;
          li {
            width: 84px;
            h2 {
              font-size: 36px;
              color: #ff5757;
              text-shadow: 2px 4px 7px rgba(255, 87, 87, 0.5);
            }
            p {
              margin-top: 6px;
              font-size: 12px;
              color: #de9690;
            }
          }
        }
      }

      .echarts {
        width: 991px;
        height: 352px;
        padding: 20px;
        border-radius: 20px;
        margin-top: 20px;
        background-color: #fff;
        > div {
          display: flex;
          height: 35px;
          .left {
            flex: 1;
          }
          .right {
            height: 35px;
            width: 129px;
            padding: 5px;
            display: flex;
            justify-content: space-evenly;
            border-radius: 10px;
            background-color: #f7fbff;
            span {
              width: 37px;
              height: 25px;
              border-radius: 7px;
              text-align: center;
              line-height: 25px;
              color: #9ca3b4;
              font-size: 14px;
              cursor: pointer;
            }
            .active {
              color: #333;
              font-weight: 600;
              background-color: #fff;
            }
          }
        }
        .echartsbox {
          display: flex;
          #line {
            width: 476px;
            height: 278px;
          }
          #bar {
            width: 476px;
            height: 278px;
          }
        }
      }
    }
    .hotgoods {
      width: 317px;
      height: 538px;
      padding: 20px;
      margin-left: 10px;
      background-color: #fff;
      border-radius: 20px;
      .content {
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          height: 24px;
          margin-top: 24px;
          font-size: 14px;
          span {
            margin: 4px 25px 0 7px;
            height: 20px;
            width: 16px;
            font-size: 12px;
            text-align: center;
            line-height: 14px;
            color: #e9b499;
            background: url();
          }
          p {
            flex: 1;
          }
          div {
            color: #737589;
          }
          &:nth-child(-n + 3) span {
            width: 21px;
            height: 20px;
          }
          &:nth-child(1) span {
            background: url();
            color: #8e5900;
          }
          &:nth-child(1) span {
            background: url();
            color: #494949;
          }
          &:nth-child(1) span {
            background: url();
            color: #cf6d3d;
          }
        }
      }
    }
  }
  .bottom {
    margin: 20px 0 60px;
    width: 100%;
    display: flex;
    .top {
      display: flex;
      h4 {
        flex: 1;
      }
      i {
        font-size: 16px;
        color: #5f84ff;
        cursor: pointer;
      }
    }
    .left {
      width: 767px;
      height: 353px;
      padding: 20px;
      border-radius: 20px;
      background-color: #fff;
      .bottom {
        display: flex;
        .info {
          width: 154px;
          height: 230px;
          margin-top: 12px;
          padding: 47px 0 0 38px;
          background: linear-gradient(transparent, #f8f8f9 0) 0 0, linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0, linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%, linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
          background-size: 50% 50%;
          background-repeat: no-repeat;
          h3 {
            line-height: 35px;
            color: #072074;
            font-size: 24px;
          }
          p {
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 22px;
          }
        }
      }
    }
    #pie {
      width: 509px;
      height: 284px;
    }
    .right {
      margin-left: 15px;
      width: 542px;
      height: 353px;
      border-radius: 20px;
      padding: 20px;
      background-color: #fff;
      text-align: center;
      .pic {
        margin-top: 80px;
        img {
          height: 96px;
          width: 123px;
        }
      }
      p {
        margin-top: 18px;
        font-size: 14px;
      }
    }
  }
}
</style>
